#{extends 'main_cliente.html' /}
#{set title:'Home' /}


<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/layout_cliente.css'}" />
<link type="text/css" rel="stylesheet" href="@{'/public/stylesheets/right.css'}" />
<link type="text/css" rel="stylesheet" href="@{'/public/stylesheets/layout_caixinha.css'}" />
<link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/layout_produto.css'}">

<script type="text/javascript" src="../../../public/javascripts/jquery1.3.1-min.js"></script>
<script type="text/javascript" src="../../../public/javascripts/jquery1.6.js"></script>
<script src="@{'/public/javascripts/jquery.jcarousel.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.slide.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script language="javascript">
	$(document).ready(function (){
				$("#slideimg").PikaChoose({carousel:true, carouselVertical:true});
			});
</script>

<script>
function escolhe_modal( id ){
		if (id == 0){
			open_modal('#dialog0');
		}	
		if (id == 1){
			open_modal('#dialog1');
		}
		if (id == 2){
			open_modal('#dialog2');
		}
		if (id == 3){
			open_modal('#dialog3');
		}
		if (id == 4){
			open_modal('#dialog4');
		}
		if (id == 5){
			open_modal('#dialog5');
		}
	}
	
	function open_modal( id ){  
	    var maskHeight = $(document).height();  
	    var maskWidth = $(window).width();  
	      
	    $('#mask').css({'width':maskWidth,'height':maskHeight});  
	  
	    $('#mask').fadeIn(1000);      
	    $('#mask').fadeTo("slow",0.8);    
	      
	    //Get the window height and width  
	    var winH = $(window).height();  
	    var winW = $(window).width();  
	                
	    $(id).css('top',  winH/2-$(id).height()/2);  
	    $(id).css('left', winW/2-$(id).width()/2);  
	    $(id).fadeIn(2000);   
	};  
	$(document).ready(function() {    
	      
	    $('a[name=modal]').click(function(e) {  
	        e.preventDefault();  
	        open_modal( $(this).attr('href') );   
	    });  

	    $('.window .close').click(function (e) {  
	        e.preventDefault();  
	          
	        $('#mask').hide();  
	        $('.window').hide();

	        
	    });       
	      
	    $('#mask').click(function () {  
	        $(this).hide();  
	        $('.window').hide();  
	    });  
	});
</script>

<script type="text/javascript">
function envia()
{

  document.formLogin.submit();
}
</script>

<div id="conteudo">
<form name="formLogin" action="@{login()}">
	<div id="barramenu">
    
    	<div id="login">
        	<p>Minha Conta</p>
            
            <br />

            <b>Login:</b>
            <input type="text" name="usuario" id="login_usu" style="border:none; background-color: none" />
  
            <b>Senha:</b>
            <input type="password" name="senha" id="login_senha" style="border:none; background-color: none" />        
            <a onclick="envia()" id="entrar"></a>            
            
            <a href="@{Clientes.cadCliente()}" id="novocad">Cadastre-se</a>
            <br /> 
            <h7><span class="error">#{error 'login' /}</span></h7>
                      	
        </div>
</form>		
        <h1>Compartilhe</h1>
        <a href="http://www.facebook.com/IaraBijuis?ref=ts" id="curtirpag"><img src="../../../public/images/curta-no-facebook.png" /></a>      
    </div>
    
    <h1>Bem-Vindo!</h1>
    
	<div class="slide">
		<ul class="jcarousel-skin" id="slideimg" name="slideimg">
			<li><a href=""><img src="../../../public/images/Slide/1.png"/></a><span>Pulseira tran�ada com pedrinhas.</span></li>
			<li><a href=""><img src="../../../public/images/Slide/2.png"></a><span>Lan�amento! Pulseiras com cores variadas</span></li>
			<li><a href=""><img src="../../../public/images/Slide/3.png"/></a><span>Conhe�a nossos pordutos!</span></li>
			<li><a href=""><img src="../../../public/images/Slide/4.png"/></a><span>Pulseira elegante.</span></li>
			<li><a href=""><img src="../../../public/images/Slide/5.png"/></a><span>Pulseira banhada a ouro.</span></li>
		</ul>
	</div>
     
    <h6>___________________________________________________________________________________________________________________</h6> 
	<h4>Conheça nossa</h4>
	<h2>Vitrine !</h2>
    

	<div id="barra">
    </div>

    <div id="vitrine">
        
	#{list contador, as:'contador'} 
		
        <table align="left">
        	<tr>
    			<td><a id="prod" name="modal" onClick="escolhe_modal(${contador})" href=""><img class="imagemvit" src="@{Produtos.imagemProduto(produtos[contador].id)}"/></a></br><span>${produtos[contador].nome}</span><br /><span>R$ ${valores[contador]}</span><br /><a name="modal" onClick="escolhe_modal(${contador})" href="" id="ver"></a></td>
            </tr>
        </table>

	#{/list} 
           
		</table>

    </div>
    
	<div id="boxes" align="center">

		#{form @Clientes.addProduto(), name:'form_modal0', id:'form_modal0'}
		<div id="dialog0" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[0].id)}" />
			<h4>${produtos[0].nome}</h4>
			<h6>${produtos[0].descricao}</h6>
			<h4>R$ ${valores[0]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden" value="${produtos[0].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}" value="${quantidade}" id="quantid" min="1" required oninput="check(this)"><input type="image" id="adicionar" onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')" src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} 
        
        #{if produtos.size()>1} #{form @Clientes.addProduto(),name:'form_modal1', id:'form_modal1'}
        
		<div id="dialog1" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[1].id)}" />
			<h4>${produtos[1].nome}</h4>
			<h6>${produtos[1].descricao}</h6>
			<h4>R$ ${valores[1]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden" value="${produtos[1].id}" id="quantidade" /> #{/field} #{field 'quantidade'} <input type="number" name="${field.name}" value="${quantidade}" id="quantid" min="1" required oninput="check(this)"><input type="image" id="adicionar" onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')" src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form}
        
        #{/if} 
        
        #{if produtos.size()>2} #{form @Clientes.addProduto(), name:'form_modal2', id:'form_modal2'}
        
		<div id="dialog2" class="window">
			<a href="#" class="close"><img
				src="../../../public/images/close.png" /></a><br /> <img
				id="prod_exibir" src="@{Produtos.imagemProduto(produtos[2].id)}" />
			<h4>${produtos[2].nome}</h4>
			<h6>${produtos[2].descricao}</h6>
			<h4>R$ ${valores[2]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden" value="${produtos[2].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}" value="${quantidade}" id="quantid" min="1" required oninput="check(this)"><input type="image" id="adicionar" onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')" src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} 
        #{/if} 
        #{if produtos.size()>3} #{form @Clientes.addProduto(),name:'form_modal3', id:'form_modal3'}
        
		<div id="dialog3" class="window">
			<a href="#" class="close"><img src="../../../public/images/close.png" /></a><br /> <img id="prod_exibir" src="@{Produtos.imagemProduto(produtos[3].id)}" />
			<h4>${produtos[3].nome}</h4>
			<h6>${produtos[3].descricao}</h6>
			<h4>R$ ${valores[3]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden" value="${produtos[3].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}" value="${quantidade}" id="quantid" min="1" required oninput="check(this)"><input type="image" id="adicionar" onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')" src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} 
        #{/if} 
        #{if produtos.size()>4} #{form @Clientes.addProduto(), name:'form_modal4', id:'form_modal4'}
        
		<div id="dialog4" class="window">
			<a href="#" class="close"><img src="../../../public/images/close.png" /></a><br /> <img id="prod_exibir" src="@{Produtos.imagemProduto(produtos[4].id)}" />
			<h4>${produtos[4].nome}</h4>
			<h6>${produtos[4].descricao}</h6>
			<h4>R$ ${valores[4]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden" value="${produtos[4].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}" value="${quantidade}" id="quantid" min="1" required oninput="check(this)"><input type="image" id="adicionar" onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')" src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} 
        #{/if} 
        #{if produtos.size()>5} #{form @Clientes.addProduto(),name:'form_modal5', id:'form_modal5'}
        
		<div id="dialog5" class="window">
			<a href="#" class="close"><img src="../../../public/images/close.png" /></a><br /> <img id="prod_exibir" src="@{Produtos.imagemProduto(produtos[5].id)}" />
			<h4>${produtos[5].nome}</h4>
			<h6>${produtos[5].descricao}</h6>
			<h4>R$ ${valores[5]}</h4>
			<h5>Quantidade</h5>
			#{field 'idProduto'} <input name="${field.name}" type="hidden" value="${produtos[5].id}" id="quantidade" /> #{/field} #{field
			'quantidade'} <input type="number" name="${field.name}" value="${quantidade}" id="quantid" min="1" required oninput="check(this)"><input type="image" id="adicionar" onclick="return confirm('Deseja realmente adicionar este produto a sua caixinha? Você poderá exclui-lo da sua caixinha antes de enviar o pedido!')" src="../../../public/images/botaoadicionar.png" /> #{/field}

		</div>
		#{/form} 
        #{/if}


		<!-- Máscara para cobrir a tela -->
		<div id="mask">
        </div>
	</div>       
</div>